// 登录
import { parse } from 'qs';
import React from 'react';
import { Link } from 'react-router-dom';
import moment from 'moment';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Layout, Menu, Button, Modal } from 'antd';
import { useLocation } from 'react-router';
import { Header } from '~/components/LoginHeader';
import * as loginApi from '~/apis/login/loginApi';
import imgPolicy from '~/assets/login/policy.png';
import imgKnowledge from '~/assets/login/knowledge.png';
import imgProject from '~/assets/login/project.png';
import imgSector from '~/assets/login/sector.png';
import './index.local.sass';

const { Content } = Layout;

const LoginPage = observer(() => {
  const location = useLocation();
  const querryParams = parse(location.search, { ignoreQueryPrefix: true });

  const state = useLocalStore(() => ({
    forwardPage: querryParams.forward || '',
    loading: false,
    registerVisible: false,
    forgetVisible: false,
    current: 'past',
    tableList: [{
      id: 0,
      title: '',
      createTime: '',
    }],
    pppTableList: [{
      id: 0,
      title: '',
      createTime: '',
    }],
    eventTableList: [{
      id: 0,
      eventsTitle: '',
      startingTime: '',
    }],
  }));


  const doQuery = () => {
    // ppp
    loginApi.newsList({
      pageNum: 1,
      pageSize: 4,
      type: 0,
    }).then((res) => {
      state.pppTableList = res.data;
    }).finally(() => {
      state.loading = false;
    });

    loginApi.newsList({
      pageNum: 1,
      pageSize: 4,
      type: 1,
    }).then((res) => {
      state.tableList = res.data;
    }).finally(() => {
      state.loading = false;
    });

    loginApi.eventsList({
      pageNum: 1,
      pageSize: 2,
      showType: 1,
    }).then((res) => {
      state.eventTableList = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const handleClick = (e: any) => {
    state.current = e.key;
    const params = {
      pageNum: 1,
      pageSize: 2,
      showType: state.current === 'past' ? 1 : 2,
    };
    loginApi.eventsList(params).then((res) => {
      state.eventTableList = res.data;
    }).finally(() => {
      state.loading = false;
    });
  };

  const info = () => {
    Modal.info({
      title: 'Please log in and visit later',
      cancelText: 'Ok',
    });
  };

  React.useEffect(() => {
    doQuery();
  }, []);

  return (
    <Layout>
      <Header />
      <Content>
        <div className="main-wrap">
          <h1 className="main-title">Web Portal of the infrastructure Financing and Public-Private Partnership (PPP) Network of Asia and the Pacific</h1>

          <div className="content-wrap flex">
            <div className="side-wrap left-side flex flex-col flex-none w-2/5">
              <div className="list-view">
                <h2 className="list-title">
                  <div className="card-title"><span className="title-icon">&nbsp;</span><span className="title-text">Member States Updates</span></div>
                  <Link className="link" to='/login/more?key=1'>More</Link>
                </h2>
                <ul>
                  {
                    state.tableList.length && state.tableList.map((v, index) => (
                      <li key={v.id} className="sub-link mt-2">
                        <span className="sub-wrap">
                          <span className="sub-content truncate">{v.title}</span>
                          {!index && <Button type="primary" shape="round" size="small">New</Button>}
                        </span>
                        <span>{moment(v.createTime).format('YYYY/MM/DD')}</span>
                      </li>
                    ))
                  }
                </ul>
              </div>

              <div className="list-view mt-10">
                <h2 className="list-title">
                  <div className="card-title"><span className="title-icon">&nbsp;</span><span className="title-text">International PPP news</span></div>
                  <Link className="link" to='/login/more?key=2'>More</Link>
                </h2>
                <ul>
                  {
                    state.pppTableList.length && state.pppTableList.map((v) => (
                      <li key={v.id} className="sub-link mt-2">
                        <span className="sub-wrap">
                          <span className="sub-content truncate">{v.title}</span>
                        </span>
                        <span>{moment(v.createTime).format('YYYY/MM/DD')}</span>
                      </li>
                    ))
                  }
                </ul>
              </div>
              <div className="list-view mt-10">
                <h2 className="list-title">
                  <div className="card-title"><span className="title-icon">&nbsp;</span><span className="title-text">Network Events</span></div>
                  <Link className="link" to='/login/more?key=5'>More</Link>
                </h2>
                <ul>
                  <Menu onClick={handleClick} selectedKeys={[state.current]} mode="horizontal">
                    <Menu.Item key="past" className=" ml-20">Past Events</Menu.Item>
                    <Menu.Item key="upcoming" className="ml-32">Upcoming Events</Menu.Item>
                  </Menu>
                  {
                    state.eventTableList.length && state.eventTableList.map((v) => (
                      <li key={v.id} className="sub-link mt-2">
                        <span className="sub-wrap">
                          <span className="sub-content truncate">{v.eventsTitle}</span>
                        </span>
                        <span>{moment(v.startingTime).format('YYYY/MM/DD')}</span>
                      </li>
                    ))
                  }
                </ul>
              </div>
            </div>
            <div className="right-side flex flex-col w-3/5 mt-10">
              <div className="flex flex-row justify-between">
                <div className="flex flex-col w-1/2 mr-6">
                  <div className="mb-6">
                    <Link to='/login/more?key=3'><img src={imgPolicy} /></Link>
                    <p className="text-wrap mt-2">Policy & Case Study</p>
                  </div>
                </div>
                <div className="flex flex-col w-1/2">
                  <div className="mb-6">
                    <Link to='/login/more?key=4'><img src={imgKnowledge} /></Link>
                    <p className="text-wrap mt-2">International Knowledge Sharing</p>
                  </div>
                </div>
              </div>
              <div className="flex flex-row justify-between">
                <div className="flex flex-col w-1/2 mr-6">
                  <div className="mb-6">
                    <img src={imgProject} onClick={info}/>
                    <p className="text-wrap mt-2">Project Pipeline</p>
                  </div>
                </div>
                <div className="flex flex-col w-1/2">
                  <div className="mb-6">
                    <img src={imgSector} onClick={info}/>
                    <p className="text-wrap mt-2">Private Sector</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Content>
    </Layout>
  );
});

export default LoginPage;
